import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Modal, Radio } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import columnsData, { columnsDataType } from './data'
import { getMerchantList } from './service'
import TableTitle from '../../../components/TableTitle'

export default () => {
    const { TextArea } = Input;
    // 锁定冻结模态框控制
    const [isFrozenModalVisible, setIsFrozenModalVisible] = useState(false);
    // 确认 获取原因表单
    const reasonFormRef: any = React.createRef();
    // 存储状态:正常还是锁定
    const [isLocking, setIsLocking] = useState('');

    // 处理冻结用户
    const handleFrozenInfoOk = async () => {
        // 获取新增表单的值
        var reponse = reasonFormRef.current?.getFieldsValue()
        console.log(reponse);
        // 表单验证
        reasonFormRef.current.validateFields().then(() => {
            // 重置表单
            reasonFormRef.current.resetFields();
            // 关闭模态框
            setIsFrozenModalVisible(false)
        }).catch(() => { })
    }

    // 表头数据
    const columns: ProColumns<columnsDataType>[] = columnsData

    // 操作行数据 自定义操作行
    const actionRender: any = (text: any, record: any, index: number) =>
        <a key={record.id} onClick={() => { locking(record) }}>
            {record.islocking === 'lock' ? '解锁' : '锁定'}
        </a>

  // 金额行数据 自定义靠右
  const moneyRender: any = (text: any, record: any, index: number) =>
    [<p key={record.id} style={{ textAlign: 'right', margin: 0 }}>{text}</p>]

    // 自定义数据的表格头部数据
    columns.forEach((item: any) => {
        item.dataIndex === 'action' ? item.render = actionRender : undefined
        item.dataIndex === 'money' ? item.render = moneyRender : undefined
    });

    // 锁定解锁
    const locking = (record: any) => {
        setIsFrozenModalVisible(true)
        record.islocking === 'lock' ? setIsLocking('unlock') : setIsLocking('lock')
    }

    return (
        <div>
            {/* Pro表格 */}
            <ProTable<columnsDataType>
               headerTitle={<TableTitle title='积分账户' />}
                bordered
                // 表头
                columns={columns}
                // 请求获取的数据
                request={
                    async params => getMerchantList(params)
                }
                rowKey="id"
                // 本地存储表格列的显示数据
                columnsState={{
                    persistenceKey: 'pro-table-singe-demos',
                    persistenceType: 'localStorage',
                }}
                // 搜索框配置
                search={{
                    labelWidth: 'auto',
                }}
                // 搜索表单的配置
                form={{
                    ignoreRules: false,
                }}
                pagination={{
                    pageSize: 5,
                }}
                dateFormatter="string"
            />
            {/* 冻结模态框 */}
            <Modal
                title={
                    <div>
                        <span>户名</span><span style={{ marginLeft: 20, marginRight: 20 }}>账号</span>
                    </div>}
                centered
                visible={isFrozenModalVisible}
                onOk={handleFrozenInfoOk}
                onCancel={() => setIsFrozenModalVisible(false)}
            >
                <Radio.Group value={isLocking} disabled={true} style={{ marginBottom: 24 }}>
                    <Radio value={'lock'}>锁定</Radio>
                    <Radio value={'unlock'}>解锁</Radio>
                </Radio.Group>
                <Form
                    name="basic"
                    ref={reasonFormRef}
                    wrapperCol={{ span: 24 }}
                    autoComplete="off"
                >
                    <Form.Item
                        key="refusalCause"
                        name="refusalCause"
                        rules={[{ required: true, message: '请填写原因' }]}
                    >
                        <TextArea rows={4} placeholder="请输入原因" />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};